<template>
  <div class="editor-container">
    <div class="toolbar">
      <div class="toolbar-left">
        <button class="tool-button" title="矩形" @click="addNewRect">
          <span>□</span>
        </button>
        <button class="tool-button" title="圆形" @click="addNewCircle">
          <span>○</span>
        </button>
        <button class="tool-button" title="文本" @click="addNewText">
          <span>T</span>
        </button>
        <button class="tool-button" title="清空" @click="clearCanvas">
          <span>🗑️</span>
        </button>
      </div>
    </div>
    
    <!-- Canvas容器 -->
    <div class="canvas-wrapper">
      <div id="canvas-container" class="canvas-box">
        <canvas id="fabric-canvas"></canvas>
      </div>
    </div>
    
    <div class="footer">
      <div id="debug-info" style="color: blue; font-weight: bold;">准备初始化Canvas...</div>
    </div>
  </div>
</template>

<script>
// 导入fabric.js
import * as fabricModule from 'fabric';
const fabric = fabricModule.fabric || fabricModule;

export default {
  name: 'SimpleEditorView',
  data() {
    return {
      canvas: null,
      initialized: false
    };
  },
  mounted() {
    // 确保组件完全挂载后再初始化Canvas
    this.$nextTick(() => {
      // 添加一个短延迟确保DOM完全渲染
      setTimeout(() => {
        this.initCanvas();
      }, 200);
    });
  },
  methods: {
    // 初始化Canvas
    initCanvas() {
      try {
        const debugEl = document.getElementById('debug-info');
        debugEl.textContent = "正在初始化Canvas...";
        
        // 检查并重置Canvas容器
        const container = document.getElementById('canvas-container');
        if (!container) {
          debugEl.textContent = "错误: 找不到Canvas容器!";
          return;
        }
        
        // 确保容器为空
        container.innerHTML = '<canvas id="fabric-canvas"></canvas>';
        
        // 获取Canvas元素
        const canvasEl = document.getElementById('fabric-canvas');
        if (!canvasEl) {
          debugEl.textContent = "错误: Canvas元素创建失败!";
          return;
        }
        
        // 设置Canvas尺寸
        canvasEl.width = 800;
        canvasEl.height = 600;
        
        // 使用原生Canvas画一些内容测试
        const ctx = canvasEl.getContext('2d');
        ctx.fillStyle = '#ff0000';
        ctx.fillRect(50, 50, 200, 200);
        ctx.fillStyle = '#000000';
        ctx.font = '30px Arial';
        ctx.fillText('Canvas测试', 60, 150);
        
        // 创建Fabric Canvas实例
        debugEl.textContent = "正在创建Fabric.js实例...";
        
        try {
          // 使用fabric创建新画布
          this.canvas = new fabric.Canvas('fabric-canvas', {
            width: 800,
            height: 600,
            backgroundColor: '#ffffff'
          });
          
          // 检查canvas是否创建成功
          if (!this.canvas) {
            debugEl.textContent = "错误: Fabric Canvas创建失败!";
            return;
          }
          
          // 添加测试对象
          this.addShape();
          
          // 设置成功状态
          this.initialized = true;
          debugEl.textContent = "Canvas初始化成功!";
          
          // 在控制台提供访问
          window.canvas = this.canvas;
        } catch (err) {
          debugEl.textContent = `Fabric错误: ${err.message}`;
          console.error('Fabric Canvas初始化失败:', err);
        }
      } catch (err) {
        // 获取错误信息元素
        const debugEl = document.getElementById('debug-info');
        if (debugEl) {
          debugEl.textContent = `初始化错误: ${err.message}`;
        }
        console.error('Canvas初始化失败:', err);
      }
    },
    
    // 添加简单形状
    addShape() {
      // 添加红色矩形
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
      });
      
      this.canvas.add(rect);
      this.canvas.renderAll();
    },
    
    // 添加矩形
    addNewRect() {
      if (!this.initialized) {
        alert('Canvas尚未初始化!');
        return;
      }
      
      const rect = new fabric.Rect({
        left: Math.random() * 500,
        top: Math.random() * 400,
        fill: this.getRandomColor(),
        width: 100,
        height: 80,
        stroke: 'black',
        strokeWidth: 1
      });
      
      this.canvas.add(rect);
      this.canvas.setActiveObject(rect);
      this.canvas.renderAll();
    },
    
    // 添加圆形
    addNewCircle() {
      if (!this.initialized) {
        alert('Canvas尚未初始化!');
        return;
      }
      
      const circle = new fabric.Circle({
        left: Math.random() * 500,
        top: Math.random() * 400,
        fill: this.getRandomColor(),
        radius: 50,
        stroke: 'black',
        strokeWidth: 1
      });
      
      this.canvas.add(circle);
      this.canvas.setActiveObject(circle);
      this.canvas.renderAll();
    },
    
    // 添加文本
    addNewText() {
      if (!this.initialized) {
        alert('Canvas尚未初始化!');
        return;
      }
      
      const text = new fabric.IText('双击编辑文本', {
        left: Math.random() * 500,
        top: Math.random() * 400,
        fill: this.getRandomColor(),
        fontSize: 20,
        editable: true
      });
      
      this.canvas.add(text);
      this.canvas.setActiveObject(text);
      this.canvas.renderAll();
    },
    
    // 清空画布
    clearCanvas() {
      if (!this.initialized) {
        alert('Canvas尚未初始化!');
        return;
      }
      
      this.canvas.clear();
      this.canvas.backgroundColor = '#ffffff';
      this.canvas.renderAll();
    },
    
    // 获取随机颜色
    getRandomColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
  },
  beforeDestroy() {
    // 清理Canvas
    if (this.canvas) {
      this.canvas.dispose();
      this.canvas = null;
    }
  }
};
</script>

<style>
.editor-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  padding: 20px;
  overflow: auto;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 10;
}

.tool-button {
  padding: 8px 16px;
  margin-right: 5px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.tool-button:hover {
  background: #e9e9e9;
}

/* 画布包装器 */
.canvas-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 600px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
  margin-bottom: 20px;
  padding: 20px;
}

/* 画布容器 */
.canvas-box {
  width: 800px;
  height: 600px;
  position: relative;
  background: white;
  border: 2px solid #1890ff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin: 0 auto;
}

/* 画布标签 */
#fabric-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  border: none;
  touch-action: none;
}

.footer {
  margin-top: 10px;
  text-align: center;
  padding: 10px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Fabric生成的Canvas容器 */
.canvas-container {
  margin: 0 auto !important;
  position: relative !important;
}
</style> 